<template>
  <view class="showCode">
    <view class="content">
      <view class="top"> 核销二维码 </view>
      <view class="center">
        <image :src="details.code" mode="aspectFit" class="image"></image>
      </view>
      <view class="bottom" v-if="details.start_time">
        有效期：{{ details.start_time.substring(0, 16) }}-{{
          details.end_time.substring(0, 16)
        }}
      </view>
      <view class="bottom" v-if="details.write_number">
        核销码：{{ details.write_number }}
      </view>
      <view class="logs">
        <view class="des">
          请告知商户使用<text class="color">【团洗洗车】</text>商户端扫码核销
        </view>
        <view class="list" v-for="(item, index) in log" :key="index">
          <view class="item">
            <view class="name"> {{ item.card_type_name }}:{{ item.number }}次 </view>
            <view class="price">
              <u-icon
                v-if="item.card_type_id == 30"
                label="启动洗车机"
                size="40rpx"
                color="#2CB9A4"
                label-pos="bottom"
                label-size="20rpx"
                label-color="#2CB9A4"
                name="scan"
                @click="goSweep"
              ></u-icon
              ><text>剩余：{{ item.residue }}次</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getCode } from "@/request/api.js";
export default {
  data() {
    return {
      form: null,
      details: {
        end_time: "",
        start_time: "",
      },
      log: [],
    };
  },
  onLoad(res) {
    this.form = JSON.parse(res.form);
    this.log = this.form.log;
    this.getDetails();
  },
  methods: {
    async getDetails() {
      let res = await getCode(this.form);
      this.details = res.data;
    },
    goSweep() {
      uni.scanCode({
        success: (res) => {
          let parames = this.getQueryString(res.result);
          console.log("parames" + parames.device_name);
          if (parames.device_name) {
            uni.navigateTo({
              url:
                "/my_pages/codeSweepWash/codeSweepWash?type=1&scene=" +
                parames.device_name,
            });
            return false;
          } else if (res.path) {
            uni.navigateTo({
              url: `/${res.path}`,
            });
          } else {
            setTimeout(() => {
              uni.showToast({
                duration: 1500,
                icon: "none",
                title: "您的二维码无法识别!",
              });
            }, 1500);
          }
        },
        fail: (err) => {
          if (err.errMsg == "scanCode:fail cancel") return false;
          uni.showToast({
            duration: 1500,
            icon: "none",
            title: "您的二维码无法识别!",
          });
        },
      });
    },
    getQueryString(url) {
      let pattern = /(\w+)=(\w+)/gi; //定义正则表达式
      let parames = {}; // 定义参数对象
      url.replace(pattern, ($, $1, $2) => {
        parames[$1] = $2;
      });
      return parames;
    },
  },
};
</script>
<style>
page {
  background: rgba(0, 0, 0, 0.5);
}
</style>
<style lang="scss" scoped>
.showCode {
  .content {
    color: #fff;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 40%;
    text-align: center;
    align-items: center;

    .top {
      font-weight: 600;
    }

    .center {
      margin: -40rpx;

      .image {
        width: 300rpx;
      }
    }

    .bottom {
      font-size: 26rpx;
      margin-bottom: 20rpx;
    }

    .logs {
      //
      width: 100vw;
      margin: auto;
      padding: 20rpx;
      box-sizing: border-box;
      font-size: 26rpx;

      .title {
      }

      .list {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #fff;
          border-radius: 10px;
          width: 100%;
          padding: 30rpx;
          color: #2cb9a4;
          margin-top: 20rpx;

          .name {
            flex: 1;
            text-align: left;
          }

          .price {
            max-width: 250rpx;
            width: auto;
            display: flex;
            align-items: center;
            justify-content: flex-end;
						text {
							margin-left: 10rpx;
						}
          }
        }

        .check {
        }
      }

      .des {
        margin-top: 20rpx;
        color: #fff;

        .color {
          color: #2cb9a4;
          font-weight: 600;
        }
      }
    }
  }
}
</style>
